import React from 'react'
import ReactDOM from 'react-dom'

// 特例关系(class定义的组件)
function FancyBorder(props) {
  return (
    <div className={'FancyBorder--' + props.color}>
      {props.children}
    </div>
  )
}

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  )
}

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = { login: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
  }
  handleChange(e) {
    this.setState({
      login: e.target.value
    })
  }
  handleSignUp() {
    console.log(`welcome to react + ${this.state.login}`)
  }
  render() {
    return (
      <Dialog title="hello" message="react is good!">
        <input
          value={this.state.login}
          onChange={this.handleChange} />
        <button onClick={this.handleSignUp}>
          sign up!
        </button>
      </Dialog>
    )
  }
}

ReactDOM.render(
  <SignUpDialog />,
  document.getElementById('root')
)